<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能网站生成器</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            background: linear-gradient(135deg, #0066cc 0%, #004080 100%);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .container {
            text-align: center;
        }
        .hero-title {
            font-size: 3rem;
            font-weight: bold;
            color: white;
            margin-bottom: 1rem;
        }
        .hero-subtitle {
            font-size: 1.25rem;
            color: rgba(255, 255, 255, 0.9);
            margin-bottom: 3rem;
            max-width: 600px;
            margin-left: auto;
            margin-right: auto;
        }
        .btn-primary {
            background-color: white;
            color: #0066cc;
            border: none;
            padding: 1rem 2rem;
            font-size: 1.125rem;
            font-weight: bold;
            border-radius: 0.5rem;
            transition: all 0.3s ease;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        .btn-primary:hover {
            background-color: #f8f9fa;
            transform: translateY(-2px);
            box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
        }
        .features {
            display: flex;
            justify-content: center;
            gap: 3rem;
            margin-top: 5rem;
            flex-wrap: wrap;
        }
        .feature-item {
            color: white;
            text-align: center;
            max-width: 200px;
        }
        .feature-icon {
            font-size: 2.5rem;
            margin-bottom: 1rem;
            opacity: 0.9;
        }
        .feature-title {
            font-weight: bold;
            margin-bottom: 0.5rem;
        }
        .feature-desc {
            font-size: 0.875rem;
            opacity: 0.8;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1 class="hero-title">
            <i class="fa fa-magic mr-2"></i>智能网站生成器
        </h1>
        <p class="hero-subtitle">
            选择您需要的网站组件，快速生成专业、美观的企业网站。无需专业知识，简单几步即可完成。
        </p>
        <a href="php/generate_website.php" class="btn btn-primary">
            <i class="fa fa-cogs mr-2"></i>开始创建网站
        </a>
        
        <div class="features">
            <div class="feature-item">
                <div class="feature-icon">
                    <i class="fa fa-puzzle-piece"></i>
                </div>
                <div class="feature-title">丰富组件</div>
                <div class="feature-desc">包含20+专业网站模块，满足不同需求</div>
            </div>
            <div class="feature-item">
                <div class="feature-icon">
                    <i class="fa fa-code"></i>
                </div>
                <div class="feature-title">代码优化</div>
                <div class="feature-desc">生成的代码结构清晰，易于维护和扩展</div>
            </div>
            <div class="feature-item">
                <div class="feature-icon">
                    <i class="fa fa-mobile"></i>
                </div>
                <div class="feature-title">响应式设计</div>
                <div class="feature-desc">完美适配各种设备，提供良好用户体验</div>
            </div>
        </div>
    </div>
</body>
</html>